Chrome Extension - 功能架構

首先跟大家介紹的是 Chrome Extension 的架構，我們要先了解一個基本的架構是長怎麼樣的，Chrome Extension的程式是使用HTML+CSS+JavaScript執行的，所以基本上你會寫前端的話，大致上就可以寫出一個chrome extension了。而我們現在要來一一介紹它的主要組件：

根據官方文件切為此五大組件

• Manifest
• 後台腳本
• UI頁面
• 內容腳本
• 選項頁面

圖片來源:Google Chrome

manifest.json

跟很多應用程式一樣，都會有一個專門控管程式的各種資訊與元件管理的文件，而我們的Manifest做了更多，它控管了其他組件的執行權限，以及對網站及cookies等等的存取權限，還有一些靜態的資料設定，設錯了chrome就不會讓你載入喔！

後台腳本(background)

這個腳本基本上是這個chrome extension最強大的功能了，它會一直在休眠等待呼叫(也可以設定成永遠背景執行)，而且它沒有自己的view，所以通常被使用在監聽事件上，而chrome的api大部分也只支援此腳本使用，並且它的dev tools與其它腳本都是獨立的。

觀看Background的Dev Tools的方式：

1. 開啟chrome的「更多」按鈕
2. 點選「更多工具 -> 擴充功能」
3. 點擊「背景頁面」來獲得後台腳本的dev tool
   

UI頁面(popup)

UI頁面就是chrome extension主要的畫面，簡單來說就是一個微型網站，因為他也有html+css+js，當你點擊extension的icon以後會出現的畫面，而行為模式分為browser action以及page action，前者是當你在瀏覽器開啟的時候就可以執行，而後者則是要在自定義狀況下才會執行。

內容腳本(content script)

內容腳本是一種嵌入式的功能，可以對其他網站注入你的程式碼，對其他網站進行DOM的操作，而且可以依照不同的網址注入不同的content script，所以盡量不要安裝沒有chrome商店授權的extension，以免被注入不法程式，偷偷監控你的input並且傳送到不法人士的server。

選項頁面

這個部分我目前沒有接觸，原諒我以後再補上資料T_T
或你們可以到這裡看看官方文件

既然已經了解了架構，就可以開始寫程式拉！

明天就來發布一個應用程式吧！

資料來源: https://developer.chrome.com/extensions/getstarted